@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        @font-face {
            font-family:'kaiti2';
            src:url('https://cdn.yiyiyiyi.info/fonts/kaiti2.ttf');
        }
        .table > tbody > tr > td{
            border-top: 1px solid #d4c3c3;
            line-height: 1.42857;
            padding: 8px;
            vertical-align: middle;
        }
        .qrDiv{
            position: relative;
            height:auto;
            text-align: center;
        }
        .item{
            font-size: 12px;
        }
        .text1{
            font-size: 12px;
            position: relative;
        }
        .text2{
            font-size: 12px;
            position: relative;
            font-family:"kaiti2";
        }
         .ingredient{
            font-size: 12px;
        }
        .washing1{text-align: left;text-indent:5px;}
        .washing2{text-align: center;}
        .icon{
            height: 12px;
            width: 12px;
        }
        .bar{
            border: 1px solid #383838;
            width:20px;
            margin: 0 auto;
        }
        .color{position:absolute;bottom:-7px;left:90px;}
    </style>
@endsection
@section('content')
    <div class="container">
        <h3>二维码列表</h3>
        <a class="btn btn-info" href="/production" style="position: relative;left: 80%">返回</a>
        <a class="btn btn-info qieH" href="#" abc="1" style="position: relative;left: 81%">切换英文</a>
        <a class="btn btn-primary" href="#" style="position: relative;left: 82%" onclick="preview()">打印</a>
        <input type="hidden" id="pro_id" value="{{$id}}" >
        <!--startprint-->
        <ul style="padding-left: 0">

            @if($type == 3)
                @foreach($qrcodes as $key => $qrcode)
                    <li style="list-style: none;" >
                        <div class="qrDiv" style="height: auto">
                            <div style="width: 150px;margin:0 auto;">
                                <div style="margin:0 auto;width:150px;height:120px;">
                                    <img src="{{env('CDN_DOMAIN_NAME')}}/qrcodes/{{$id}}-{{$type}}/{{$qrcode}}.png"
                                         style="width: 100px;height: 100px;position: relative;top: 10px;">
                                </div>
                                <div>{{$qrcodeInfos[$key][7]}} <br> {{$qrcodeInfos[$key][5]}}</div>

                            </div>
                        </div>
                    </li>
                @endforeach
            @elseif($type == 4)
            @foreach($qrcodes as $key => $qrcode)
                <li style="list-style: none;margin-bottom:200px;" >
                    <div class="qrDiv">
                        <div style="width: 150px;margin:0 auto;">
                            <div style="margin:0 auto;width:150px;height:100px;">
                                <img src="{{env('CDN_DOMAIN_NAME')}}/qrcodes/{{$id}}-{{$type}}/{{$qrcode}}.png"
                                     style="width: 100px;height: 100px;position: relative;top: 0px;">
                                <br/>
                            </div>
                            <div class="huanC text2">
                                <div class="item">{{$qrcodeInfos[$key][7]}}</div>
                                <div class="ingredient" style="text-align: left;font-size: 12px;text-indent:5px;">

                                </div>
                                <div class="qiehuan">
                                    <p class="text2" style="margin-bottom:0;">洗涤说明</p>
                                    <div style="text-align: center">
                                        <div class="washing2">
                                            <img src="/img/6.bmp" class="icon">
                                            <span>低温手洗</span>
                                        </div>
                                        <div class="washing2">
                                            <img src="/img/con002.jpg" class="icon">
                                            <span>不可漂白</span>
                                        </div>
                                        <div class="washing2">
                                            <img src="/img/con001.jpg" class="icon">
                                            <span>悬挂晾干</span>
                                        </div>
                                        <div class="washing2">
                                            <img src="/img/22.bmp" class="icon">
                                            <span>低温熨烫</span>
                                        </div>
                                        <div class="washing2">
                                            <img src="/img/con003.png" class="icon" style="width:14px;height:14px;">
                                            <span>不可干洗</span>
                                        </div>
                                    </div>
                                    <div  style="margin-bottom: 86px">
                                        <div>深浅色衣服请分开洗涤</div>
                                        <div>请避免暴晒及射灯照射</div>
                                    </div>
                                </div>
                                <div class="bar"></div>
                                <div class="color">{{$color}}</div>
                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
            @endif
        </ul>

    </div>
    @include('errors.list')
    <script>
        function preview() {
            var bdhtml = window.document.body.innerHTML;//获取当前页的html代码
            var startStr = "<!--startprint-->";//设置打印开始区域
            var endStr = "<!--endprint-->";//设置打印结束区域
            var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));//从标记里获取需要打印的页面
            window.document.body.innerHTML = printHtml;//需要打印的页面
            window.print();
            window.document.body.innerHTML = bdhtml;//还原界面
        }
        var made_info = '{{ $made_infos }}';
        var arr=made_info.split("/");
        var str='';
        for(var i=0;i<arr.length;i++){
            str+="<p style='margin:0;height:17px;'>"+arr[i]+"</p>"
        }
        $(".ingredient").append(str);
        /*中英文切换*/
        $(document).on("click",".qieH",function(){
            var ad=$(this).attr("abc");
            if(ad==1){
                $(this).text("切换中文");
                $(this).attr("abc","0");
                $(".huanC").removeClass("text2");
                $(".huanC").addClass("text1");
                $(".qiehuan").empty();
                $(".qiehuan").append('<p class="text1" style="margin-bottom:0;">WASH SEPAPATELY</p>' +
                    '<div style="text-align: center">' +
                    '<div class="washing1">' +
                    '<img src="/img/6.bmp" class="icon" style="margin-right:4px;">' +
                    '<span><40℃ hand wash</span>' +
                    '</div>' +
                    '<div class="washing1">' +
                    '<img src="/img/22.bmp" class="icon" style="margin-right:4px;">' +
                    '<span>ircon on medium</span>' +
                    '</div>' +
                    '<div class="washing1">' +
                    '<img src="/img/12.bmp" class="icon" style="margin-right:4px;">' +
                    '<span>flat dry</span>' +
                    '</div>' +
                    '<div class="washing1">' +
                    '<img src="/img/25.bmp" class="icon" style="margin-right:4px;">' +
                    '<span>dry clean</span>' +
                    '</div>' +
                    '</div>' +
                    '<div  style="margin-bottom: 86px">' +
                    '<div><b>color clothing and</b></div>' +
                    '<div><b>wash separately</b></div>' +
                    '<div><b>do not twist</b></div>' +
                    '</div>');
            }else if(ad==0){
                $(this).text("切换英文");
                $(this).attr("abc","1");
                $(".huanC").removeClass("text1");
                $(".huanC").addClass("text2");
                $(".qiehuan").empty();
                $(".qiehuan").append('<p class="text2" style="margin-bottom:0;">洗涤说明</p>' +
                    '<div style="text-align: center">' +
                    '<div class="washing2">' +
                    '<img src="/img/6.bmp" class="icon" style="margin-right:5px;">' +
                    '<span>常温手洗</span>' +
                    '</div>' +
                    '<div class="washing2">' +
                    '<img src="/img/con002.jpg" class="icon" style="margin-right:5px;">' +
                    '<span>不可漂白</span>' +
                    '</div>' +
                    '<div class="washing2">' +
                    '<img src="/img/con001.jpg" class="icon" style="margin-right:5px;">' +
                    '<span>悬挂晾晒</span>' +
                    '</div>' +
                    '<div class="washing2">' +
                    '<img src="/img/22.bmp" class="icon" style="margin-right:5px;">' +
                    '<span>低温熨烫</span>' +
                    '</div>' +
                    '<div class="washing2">' +
                    '<img src="/img/25.bmp" class="icon" style="margin-right:5px;">' +
                    '<span>普通干洗</span>' +
                    '</div>' +
                    '</div>' +
                    '<div  style="margin-bottom: 86px">' +
                    '<div>深浅色衣服请分开洗涤</div>' +
                    '<div>请避免暴晒及射灯照射</div>' +
                    '</div>');
            }
        });
    </script>
@endsection
